<template>
    <div v-loading="loading" class="app-container">
        <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="68px">
            <el-form-item label="课程" prop="courseId">
                <el-select v-model="queryParams.courseId" placeholder="请选择课程" clearable @change="handleChangeCoures">
                    <el-option v-for="item in courseSelectList" :key="item.courseId" :label="item.courseName"
                        :value="item.courseId" />
                </el-select>
            </el-form-item>
            <el-form-item label="班级" prop="classId">
                <el-select v-model="queryParams.classId" placeholder="请选择班级" clearable @focus="handleClassFocus">
                    <el-option v-for="item in classSelectList" :key="item.classId" :label="item.className"
                        :value="item.classId" />
                </el-select>
            </el-form-item>
            <el-form-item label="年度" prop="year">
                <el-select v-model="queryParams.year" placeholder="请选择年度" clearable>
                    <el-option v-for="item in yearSelectList" :key="item" :label="item" :value="item" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="Search" @click="gethhhList">搜索</el-button>
                <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <div class="content">
            <div class="top-view">
                <div ref="top1ChartRef" class="left-view"></div>
                <div ref="top2ChartRef" class="right-view"> </div>
            </div>
            <div class="bottom-view">
                <div ref="departChartRef" class="sub-view"> </div>
            </div>
        </div>

    </div>
</template>

<script setup name="analyse">
import * as echarts from 'echarts';
import { onMounted } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { queryCourseList, queryApplication, queryYearList } from '@/api/analyse.js'
import { queryClassByCourseId } from "@/api/register/registerList.js";

const { proxy } = getCurrentInstance();
const top1ChartRef = ref()//
const top2ChartRef = ref()//饼图
const departChartRef = ref()//折线图

const loading = ref(false);
const courseSelectList = ref([])
const yearSelectList = ref([])
const classSelectList = ref([]);
const queryParams = ref({
    courseId: null,
    classId: null,
    year: null
})

onMounted(() => {
    getSelectList()
})
/** 获取查询条件列表 */
function gethhhList() {
    loading.value = true;
    console.log("🚀 ~ queryApplication ~ queryParams.value:", queryParams.value)
    queryApplication(queryParams.value).then(response => {
        loading.value = false;
        const ages = []
        response.data.ageList.forEach(i => {
            ages.push({ value: i.ageRangeCnt, name: i.ageRange })
        });
        const sexs = []
        response.data.sexList.forEach(i => {
            sexs.push({ value: i.sexCnt, name: i.sex })
        });
        const coutses = response.data.courseList
        const titles = response.data.courseTitleList
        orderCounEchart(ages, '各年龄段报名人数', top1ChartRef.value)
        orderCounEchart1(sexs, '按性别报名人数', top2ChartRef.value)
        departCounEchart(coutses, titles)
    }).catch((error) => {
        console.log(error)
        loading.value = false;
    });

}
// change事件
const handleChangeCoures = (item) => {
    queryParams.value.classId = null
    classSelectList.value = []
    console.log("🚀 ~ handleChangeCoures ~ item:", item)
    queryClassByCourseId({ courseId: queryParams.value.courseId }).then(response => {
        if (response.code === 200) {
            classSelectList.value = response.data
        }
    });
}
const handleClassFocus = () => {
    if (!queryParams.value.courseId || queryParams.value.courseId === '') {
        ElMessage.warning('请选择课程')
        return
    }
}
/** 重置按钮操作 */
function resetQuery() {
    proxy.resetForm("queryRef");
    queryParams.value = {}
    gethhhList()
}
const getSelectList = async () => {
    const res1 = await queryCourseList()
    if (res1.code === 200) {
        courseSelectList.value = res1.rows
    }
    // const res2 = await examClasszList()
    // if (res1.code === 200) {
    //     classSelectList.value = res2.rows
    // }
    const res3 = await queryYearList()
    if (res1.code === 200) {
        yearSelectList.value = res3.data
    }

    gethhhList()
}
// 饼图
const orderCounEchart = (data, title, ref) => {

    const myChart = echarts.init(ref);
    const option = {
        tooltip: {
            trigger: 'item'
        },
        title: {
            text: title
        },
        toolbox: {
            show: true,
            feature: {
                mark: { show: true },
            }
        },
        series: [
            {
                type: 'pie',
                radius: [10, 150],
                center: ['50%', '50%'],
                roseType: 'area',
                itemStyle: {
                    borderRadius: 8
                },
                labelLayout: {
                    hideOverlap: false
                },
                data
            }
        ]
    };

    option && myChart.setOption(option);
}
const orderCounEchart1 = (data, title, ref) => {
    const myChart = echarts.init(ref);
    const option = {
        title: {
            text: title,
        },
        tooltip: {
            trigger: 'item'
        },
        series: [
            {
                type: 'pie',
                radius: '75%',
                data,
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    option && myChart.setOption(option);
}
// 折线图
const departCounEchart = (courseList, titleList) => {
    const source = [['product'].concat(titleList)]
    courseList.forEach(item => {
        const subList = [item.month]
        const dataList = item.data
        titleList.forEach(i => {
            const index = dataList.findIndex(l => l.courseName === i)
            if (index > -1) {
                subList.push(dataList[index].pCnt)
            } else {
                subList.push(0)
            }

        })
        source.push(subList)
    });
    const myChart = echarts.init(departChartRef.value);
    const option = {
        tooltip: {
            trigger: 'item'
        },
        title: {
            text: '课程报名人数'
        },
        xAxis: {
            type: 'category',
        },
        yAxis: {
            type: 'value'
        },
        legend: {},
        dataset: {
            source
        }
    };
    option.series = titleList.map(i => {
        return {
            type: 'bar',
            barMaxWidth: 80,
        }
    })
    option && myChart.setOption(option);
}
</script>

<style lang="scss" scoped>
@import './index.scss'
</style>